import './index.scss'
import {Button, Form, Input, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow} from '@tarojs/taro'
import {editUserPhoneStore} from './model'
import {CFormItem} from '@/components/form'
import appStore from '@/store/app'

const Edituserphone = () => {
  const {
    formSubmit,
    updatePageDataSource,
    pageData,
    countDownText,
    isCountDownStart,
    getAuthCode,
    newPhone,
    changeNewPhone,
    authCode,
    changeAuthCode,
    desc,
    getSplitPhone,
    resetTimes
  } = useContext(editUserPhoneStore)
  const {login} = useContext(appStore)
  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Edituserphone useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Edituserphone useDidShow')
    updatePageDataSource()
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Edituserphone useDidHide')
    resetTimes()
  })
  return (
    <View className="container">
      <Form
        onSubmit={e => {
          formSubmit(login)
        }}
      >
        <CFormItem
          label="绑定新的手机号码"
          subLabel={`当前绑定的手机号码为 +86 ${getSplitPhone(
            pageData.user?.userPhone || ''
          ).replace(/\s\d{4}\s/, ' **** ')}`}
          style={{
            marginTop: '68rpx'
          }}
        >
          <View className="flex items-center">
            <View
              className="pl-6 pr-16 border-0 border-r-1 border-solid border-border text-14"
              style={{
                color: '#0F8AF9'
              }}
            >
              +86
            </View>
            <Input
              value={newPhone}
              name="newPhone"
              type="number"
              maxlength={13}
              adjust-position
              confirm-type="done"
              className="flex-1 h-42 text-14 font-bold ml-16"
              placeholder="请输入新的手机号码"
              placeholderClass="text-14 font-light text-info_unInput"
              onInput={e => {
                let {
                  detail: {value}
                } = e
                const phone = getSplitPhone(value)
                changeNewPhone(phone)
              }}
            ></Input>
            <View
              className="ml-6 border-0 border-b-1 border-solid text-14"
              style={{
                color: '#4F82AF',
                borderColor: '#4F82AF'
              }}
              onClick={() => {
                if (isCountDownStart) {
                  getAuthCode()
                }
              }}
            >
              {countDownText}
            </View>
          </View>
        </CFormItem>

        <CFormItem
          style={{
            marginTop: '32rpx'
          }}
          desc={desc}
        >
          <Input
            value={authCode}
            name="authCode"
            placeholder="请输入验证码"
            type="number"
            adjust-position
            confirm-type="done"
            className="flex-1 h-42 text-14 font-bold"
            placeholderClass="text-14 font-light text-info_unInput"
            onInput={e => {
              let {
                detail: {value}
              } = e
              changeAuthCode(value)
            }}
          ></Input>
        </CFormItem>

        <View className="mt-56 px-16">
          <Button className="h-48 leading-48 bg-primary" formType="submit">
            <View className="text-16 text-white">完成</View>
          </Button>
        </View>
      </Form>
    </View>
  )
}
export default observer(Edituserphone)
